<!---
  @author: andy
  @description: 顶栏组件
-->
<template>
  <div class="layout-header" :style="{...style}">
    <slot name="logo" />
    <slot name="breadcrumb" />
    <slot />
  </div>
</template>
<script lang='ts' setup>
import { useConfigStore } from '@/stores/configs/config';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
const style = computed(() => {
  return configStore.isFullscreen ? {
    height : '0px',
    borderBottomWidth : '0px'
  } : {
    height : `${config.value.header.height}px`,
    borderBottomWidth : '0.01rem'
  };
});
</script>
<style lang='less' scoped>
.layout-header {
  display: flex;
  width: 100%;
  align-items: center;
  border-bottom: 1px solid;
  padding: 0 0.08rem;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow: hidden;
  .useTheme({
    border-color: border-color; 
    color: text-color;
  });
}
</style>